<template>
  <!-- 社团公共 -->
  <div class="backgd">
    <div class="lists">
      <div class="listtop">活动列表</div>
      <p v-for="item in actlist" :key="item.id" @click="select(item)">
        {{ item.name }}
      </p>
    </div>
    <div class="select">
      <div class="selecttop">
        <p class="topheader">{{ selectact.name }}</p>
        <p class="toptime">
          发稿人:{{
            selectact.people
          }}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{
            selectact.date
          }}
        </p>
      </div>
      <div class="selectbottom">
        <p>
          {{ selectact.content1 }}
        </p>
        <p>
          {{ selectact.content2 }}
        </p>
        <p>
          {{ selectact.content3 }}
        </p>
        <p>
          {{ selectact.content4 }}
        </p>
        <p>
          {{ selectact.content5 }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ClubActivity",
  data() {
    return {
      actlist: [],
      selectact: [
        {
          id: "",
          name: "",
          people: "",
          date: "",
          content1: "",
          content2: "",
          content3: "",
          content4: "",
          content5: "",
        },
      ],
    };
  },
  mounted() {
    this.all();
  },
  methods: {
    select(notice) {
      this.selectact = notice;
      // console.log(this.selectact);
    },
    all() {
      axios
        .get("http://127.0.0.1/actlist_yang/all")
        .then((res) => {
          // console.log(res.data);
          this.actlist = res.data;
          this.selectact = this.actlist[0];
          // console.log(this.actlist);
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
  },
};
</script>

<style scoped>
.backgd {
  width: 1320px;
  height: 800px;
  margin: 20px 300px 0 300px;
  border: 0;
}
.lists {
  float: left;
  height: 790px;
  width: 290px;
  border: 5px solid #158ff9;
}
.listtop {
  width: 290px;
  height: 80px;
  font-size: 30px;
  font-weight: 500;
  color: white;
  line-height: 80px;
  background-color: skyblue;
  text-align: center;
  border-bottom: 2px solid #888;
}
.lists p {
  width: 280px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  line-height: 50px;
  padding-left: 10px;
  border-bottom: 2px solid #888;
  text-overflow: ellipsis; /* 溢出显示省略号 */
  overflow: hidden; /* 溢出隐藏 */
  white-space: nowrap; /* 强制不换行 */
}
.select {
  float: right;
  height: 790px;
  width: 900px;
  border: 5px solid #158ff9;
}
.selecttop {
  position: relative;
  height: 200px;
  width: 900px;
  border-bottom: 3px solid #111;
}
.topheader {
  position: absolute;
  top: 50px;
  left: 150px;
  height: 100px;
  width: 600px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
}
.toptime {
  position: absolute;
  top: 150px;
  left: 300px;
}
.selectbottom {
  margin: 70px;
  font-size: 17px;
  text-indent: 2em;
}
</style>